<template>
    <div>
        <el-form ref="demandForm" :label-position="right" :model="demand" :rules="rules" style="margin-left: 15px; margin-top: 10px;" label-width="100px">
            <el-form-item label="需求名:" prop="demandName">
                <el-input v-model="demand.demandName" size="medium" placeholder="请输入需求名" prefix-icon="el-icon-edit" clearable style="width: 35%;" />
            </el-form-item>
            <el-form-item label="申请人姓名:" prop="realName">
                <el-input v-model="demand.realName" size="medium" placeholder="请输入申请人姓名" prefix-icon="el-icon-edit" clearable style="width: 178px;" />
            </el-form-item>
            <el-form-item label="申请部门:" prop="deptName">
                <el-select v-model="demand.deptName" size="medium" placeholder="请选择部门" prefix-icon="el-icon-s-custom" clearable style="width: 200px;">
                    <el-option v-for="(item,index) in childrenDept" :key="index" :label="item" :value="item" />
                </el-select>
            </el-form-item>
            <el-form-item label="是否对外公开">
                <el-switch v-model="demand.isOpen" active-color="#669900" />
            </el-form-item>
            <div style="padding-right: 15px;">
                <editor v-model="demand.demandDesc" />
            </div>
            <el-upload
                class="upload-demo"
                drag
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过50MB</div>
            </el-upload>
        </el-form>
        <div style="margin: 20px; float: right;">
            <el-button size="medium" @click="returnIndex">取消</el-button>
            <el-button size="medium" type="primary" @click="doAddDemand">提交</el-button>
        </div>
    </div>
</template>

<script>
import {Message} from 'element-ui'

export default {
    name: 'ProjectRequirementsLibraryCreate',
    data() {
        return {
            demand: {
                demandName: '',
                realName: '',
                deptName: '',
                demandDesc: '',
                isOpen: false  // 是否对外公开的开关
            },
            childrenDept: [],
            rules: {
                demandName: [
                    {required: true, message: '请输入需求名', trigger: 'blur'}
                ],
                realName: [
                    {required: true, message: '请输入申请人姓名', trigger: 'blur'}
                ],
                deptName: [
                    {required: true, message: '请输入申请部门', trigger: 'blur'}
                ],
                demandDesc: [
                    {required: true, message: '请填写内容', trigger: 'blur'}
                ]
            }
        }
    },
    created() {
        this.initchildrenDept()
    },
    methods: {
        returnIndex() { // 取消返回页面
            this.$router.push({path: '/project_requirements_library/index'})
        },
        initchildrenDept() { // 获取申请部门下拉框
            this.getRequest('/system/cfg/dept/getDeptName').then(resp => {
                if (resp) {
                    this.childrenDept = resp.data
                }
            })
        },
        doAddDemand() { // 确认提交添加需求
            this.$refs['demandForm'].validate(valid => {
                if (valid) {
                    let reqData = new FormData() // 数据格式转换流
                    reqData.set('demandName', this.demand.demandName)
                    reqData.set('realName', this.demand.realName)
                    reqData.set('deptName', this.demand.deptName)
                    reqData.set('isOpen', this.demand.isOpen)
                    this.postRequest('/demand/add', reqData).then(resp => {
                        if (resp.status === 200) {
                            Message.success('添加成功')
                            this.$router.push({path: '/project_requirements_library/index'})
                        }
                    })
                }
            })
        }
    }
}
</script>
